<template>
	<view>
		<Title :title="title" style="background-color: #fff;" />
		<!-- <u--form
			:model="model1"
			:rules="rules"
			ref="uForm"
			class="ml-20 mr-20 formSty"
		>
		<view class="topBg">
			<u-form-item
				:label="$t('订单编号')"
				prop="user_id"
				labelWidth="150"
				class="inputSty pl-15 mt-16 h-95"
			>
				<u--input
					v-model="model1.user_id"
					disabled
					disabledColor="#ffffff"
					border="none"
					class="mr-20 text-333 font-bold"
				></u--input>
			</u-form-item>
		</view>
			<view class="contentBg">
				<p class="titleSty pt-34 mb-24">{{$t('售后类型')}}</p>
				<u-form-item
					prop="after_sales_type"
					border="none"
				>
					<u-button 
						disabled
						disabledColor="#F7F7F7"
						class="badBtn"
					>
						<span class="text-333">{{ badInfo }}</span>
						<image class="w-20 h-15" src="/static/icon/downArrow.png"></image>
					</u-button>
					<div></div>
					<u-picker disabled disabledColor="#F7F7F7" :show="show" :columns="columns" @cancel= "show = false" @confirm="show = false"></u-picker>
				</u-form-item>
					<p class="titleSty">{{$t('情况说明')}}</p>
				<u-form-item
					prop="situation"
				>
					<u--textarea 
						disabled
						disabledColor="#F7F7F7"
						border="none"
						v-model="model1.situation"
						class="textareaSty"
					></u--textarea>
				</u-form-item>
				<u-form-item
					prop="images"
				>
					<u-upload
						:fileList="fileList1"
						@afterRead="afterRead"
						@delete="deletePic"
						name="1"
						multiple
						:maxCount="10"
						width="150"
						height="150"
						class="mt-20"
						disabled
						disabledColor="#F7F7F7"
					  ></u-upload>
				</u-form-item>
					<p class="titleSty">{{$t('承接单位')}}</p>
				<u-form-item
					prop="undertake_user_id"
				>
					<u--input
					    border="none"
					    v-model="model1.undertake_user_id"
						disabled
						disabledColor="#F7F7F7"
						class="businessSty"
					  ></u--input>
				</u-form-item>
				<p class="titleSty">{{$t('售后诉求')}}</p>
				<u-form-item
					prop="ask"
				>
					<u--textarea 
						disabled
						disabledColor="#F7F7F7"
						v-model="model1.ask"
						class="textareaSty mb-35"
					></u--textarea>
				</u-form-item>
			
			</view>
			<view class="contentBg">
				<view class="h-100 between pt-5 ml-13 mr-13 border-b">
					<p class="text-111 fz32 font-bold">{{$t('商家处理结果')}}</p>
					<p class="text-888 fz26 ">2024-12-21 10:35</p>
				</view>
				
				<u-form-item
					:label="$t('处理方式')"
					prop="method"
					ref="method"
					labelWidth="150"
					class="inputSty ml-10"
				>
					<u--input
						v-model="model1.method"
						border="none"
						class="mr-20 text-333"
					></u--input>
				</u-form-item>
				<u-form-item
					prop="bad"
					border
					ref="bad"
				>
				<u--input
				    border="none"
				    v-model="model1.bad"
					class="badBtn"
					disabled
					disabledColor="#F7F7F7"
				  ></u--input>
				</u-form-item>
					<p class="titleSty">{{$t('结算金额')}}</p>
				<u-form-item
					prop="amount"
					ref="amount"
				>
				<u--input
					border="none"
					v-model="model1.amount"
					class="badBtn mt-24 text-indent"
					disabled
					disabledColor="#F7F7F7"
				  >
					<template slot="suffix">
						<u--text
							:text="model1.amountCheap"
							slot="prefix"
							margin="0 3px 0 0"
							class="amountCheapSty"
						></u--text>
					</template>
				  </u--input>
				</u-form-item>
				<p class="titleSty">{{$t('处理说明')}}</p>
				<u-form-item
					prop="instructions"
					ref="instructions"
				>
					<u--textarea
						disabled
						disabledColor="#F7F7F7"
						v-model="model1.instructions"
						class="textareaSty mb-35"
					></u--textarea>
				</u-form-item>
			
			</view>
			<view class="contentBg">
				<view class="h-100 between pt-5 ml-13 mr-13 border-b">
					<p class="text-111 fz32 font-bold">{{$t('平台处理结果')}}</p>
					<p class="text-888 fz26 ">2024-12-21 10:35</p>
				</view>
				<u-form-item
					label="处理方式"
					prop="platformMethod"
					ref="platformMethod"
					labelWidth="150"
					class="inputSty ml-10"
				>
					<u--input
						v-model="model1.platformMethod"
						border="none"
						class="mr-20 text-333"
					></u--input>
				</u-form-item>
				<u-form-item
					prop="platformMethod"
					border
					ref="platformMethod"
				>
				<u--input
				    border="none"
				    v-model="model1.bad"
					class="badBtn"
					disabled
					disabledColor="#F7F7F7"
				  ></u--input>
				</u-form-item>
				<p class="titleSty">{{$t('处理结果')}}</p>
				<u-form-item
					prop="result"
					ref="result"
					
				>
					<u--textarea
						disabled
						disabledColor="#F7F7F7"
						v-model="model1.result"
						class="textareaSty mb-35"
					></u--textarea>
				</u-form-item>
			
			</view>
			<view class="contentBg">
				<view class="h-100 between pt-5 ml-13 mr-13 border-b">
					<p class="text-111 fz32 font-bold">{{$t('客户反馈')}}</p>
					<p class="text-888 fz26 ">2024-12-21 10:35</p>
				</view>
				<p class="titleSty">{{$t('售后诉求')}}</p>
				<u-form-item
					prop="result"
					ref="result"
				>
					<u--textarea
						disabled
						disabledColor="#F7F7F7"
						v-model="model1.result"
						class="textareaSty mb-16"
					></u--textarea>
				</u-form-item>
			<u-form-item
				prop="order.file"
				ref="file"
			>
				<u-upload
					:fileList="fileList1"
					@afterRead="afterRead"
					@delete="deletePic"
					name="1"
					multiple
					:maxCount="10"
					width="150"
					height="150"
					class="mb-20"
					disabled
					disabledColor="#F7F7F7"
				  ></u-upload>
			</u-form-item>
			</view>
		</u--form> -->
		<!-- 展示售后情况 -->
			<view>
				<view class="bor_bgff disp_info">
					<view class="between text-333 font-bold fz28">
						<view class="title">
						{{$t('订单编号')}}
						</view>
						<view class="pr-15">
							{{ handlingInfo.id }}
						</view>
					</view>
					
					<view class="title">
						{{$t('售后类型')}}
					</view>
					<view class="info_text">
						{{ get(handlingInfo, "after_sales_config.title") || '' }}
					</view>
					<view class="title">
						{{$t('情况说明')}}
					</view>
					<view class="info_text" style="height: 220rpx;">
						{{get(handlingInfo, "situation.remark") || ''}}
					</view>
					<view class="item_photo">	
						<image v-for="item in handlingInfo.attachment" class="ph" :src="getImageUrl(item.path)" mode="aspectFill"></image>
					</view>
					<view class="title">
						{{$t('承接单位')}}
					</view>
					<view class="info_text">
						{{get(handlingInfo, "undertake_user.username") || ''}}
					</view>
					<view class="title">
						{{$t('售后诉求')}}
					</view>
					<view class="info_text" style="height: 220rpx;">
						{{get(handlingInfo, "ask.remark") || ''}}
					</view>
				</view>
				
				<view v-for="item in handlingInfo.list">
					<view  v-if="item.user_type == 'store'" >
						
						<view class="disp_title">
							{{$t('商家处理结果')}}
						</view>
					
						<view class="bor_bgff disp_info">
							<view class="title">
								{{$t('处理方式')}}
							</view>
							<view class="info_text">
								{{get(item, "handle_config.title") || ''}}
							</view>
							<view class="title">
								{{$t('结算金额')}}
							</view>
							<view class="info_jiesuan">
								<view class="name">
									￥{{item.handle_money}}
								</view>
								<view class="jian">
									{{difference}}
								</view>
							</view>
							<view class="title">
								{{$t('处理说明')}}
							</view>
							<view class="info_text" style="height: 220rpx;">
								{{get(item, "handle_content.remark") || ''}}
							</view>
						</view>
					
					</view>
					<view v-else class="">
						
						<view class="disp_title">
							{{$t('平台处理结果')}}
						</view>
						<view class="bor_bgff disp_info">
							<view class="title">
								{{$t('处理方式')}}
							</view>
							<view class="info_text">
								{{get(item, "handle_config.title") || ''}}
							</view>
							<view class="title">
								{{$t('处理说明')}}
							</view>
							<view class="info_text" style="height: 220rpx;">
								{{get(item, "handle_content.remark") || ''}}
							</view>
						</view>
				
					</view>
				</view>
			</view>
		
		<!-- 继续沟通-新增 -->
		<view class="p-10 bg-fff">
			
			<u--form
				:model="handlingForm"
				:rules="rules"
				v-if="continuekey"
				ref="formInfo"
				class="ml-20 mr-20 formSty"
			> 
				<p class="titleSty">{{$t('售后诉求')}}</p>
				<u-form-item
					prop="handle_content"
					ref="handle_content"
				>
					<u--textarea v-model="handlingForm.handle_content" class="textareaSty mb-35"></u--textarea>
				</u-form-item>
			</u--form>
			
		</view>
		
		
		<view class="empty"></view>
		<view v-if="handlingInfo.status == 0" class="footer_btn4">
				<view class="btn_item" @click="callUser">
					<image class="ico" src="/static/img/ico_b1.png" mode="aspectFill"></image>
					<view class="name">
						{{$t('联系商家')}}
					</view>
				</view>
				<view class="btn_item" @click="platfornIntervention">
					<image class="ico" src="/static/img/ico_b2.png" mode="aspectFill"></image>
					<view class="name">
						{{$t('平台介入')}}
					</view>
				</view>
				<view v-if="!continuekey" class="btn_yellow" @click="continueFun">
					{{$t('继续协商')}}
				</view>
				<view v-else class="btn_yellow" @click="submit">
					{{$t('提交协商')}}
				</view>
				<view class="btn_blue" @click="complete">
					{{$t('协商一致')}}
				</view>
			</view>
		</view>
</template>

<script>
	import Title from './components/title.vue'
	import { getHandlingSituation, submitAfterSales, isHavePlatform, submitHandle, completeAfterSales } from '@/api/order.js'
	export default {
		components: {
			Title
		},
		data() {
			return {
				title: this.$t('售后处理'),
				badInfo: this.$t('货物损坏'),
				showPlat: false,
				show: false,
				continuekey: false,
				allInfo: {},
				IMAGE_URL: 'https://gluz-oss.oss-cn-beijing.aliyuncs.com/',
				fileList1: [
					{ url: '/static/img/ph_1.png', },
					{ url: '/static/img/ph_1.png', },
					{ url: '/static/img/ph_1.png', }],
				columns: [
					[this.$t('货物损坏'), this.$t('运输过慢'), this.$t('包装劣质')]
				],
				handlingForm: {
					handle_content:'',
					after_sales_id: '',
					handle_type: '',
					user_id: uni.getStorageSync("user_id"),
					user_type: ''
				},
				handlingInfo: {},
				rules: {
					'handle_content': {
						type: 'string',
						required: true,
						message: this.$t('请填写售后诉求'),
						trigger: ['change']
					}
				},
				showSex: false
			}
		},
		mounted() {
			this.getHandling({
				after_sales_id: '7',
				user_id: uni.getStorageSync("user_id")
			})
		},
		onLoad(options) {
			this.allInfo = JSON.parse(options.item)
		  },
		methods: {
			complete() {
				completeAfterSales({
					after_sales_id: this.handlingInfo.after_sales_config.id,
					user_id: uni.getStorageSync("user_id")
				}).then(res => {
					if(res.data.code == 200) {
						uni.$u.toast('提交成功')
						uni.navigateTo({
							url:'/pages/shipmentRecord/index'
						})
					} else {
						uni.$u.toast(res.data.message)
					}
				})
			},
			callUser() {
				this.isMessageGo({
					action: 'call',
					data: {
						userId: uni.getStorageSync("user_id"),
						type: 1,
					}
				})
				// console.log('90909090')
				// this.content = this.$t('是否拨打电话给') + this.allInfo.orderInfo.tel
				// this.showTel = true
			},
				continueFun() {
					this.continuekey = true
				},
				platfornIntervention() {
					isHavePlatform({after_sales_id: this.handlingInfo.after_sales_config.id}).then(res => {
						if(res.data.code == 200) {
							if (res.data.data.data == 'null') {
								this.handlingForm.handle_type = this.handlingInfo.after_sales_config.id || ''
								this.handlingForm.after_sales_id = this.handlingInfo.after_sales_config.id || ''
								this.handlingForm.user_type = 'platform'
								submitHandle({
									...this.handlingForm
									}).then(res => {
									if(res.data.code == 200) {
										uni.$u.toast('提交成功')
									} else {
										uni.$u.toast(res.data.message)
									}
								})
							} else {
								uni.$u.toast('您已提交平台介入,请稍后再试')
							}
						}
					})
				},
				submit() {
					this.handlingForm.handle_type = this.handlingInfo.after_sales_config.id || ''
					this.handlingForm.after_sales_id = this.handlingInfo.after_sales_config.id || ''
					this.handlingForm.user_type = 'store '
					this.$refs.formInfo.validate().then(res => {
						submitHandle({
							...this.handlingForm
							}).then(res => {
							if(res.data.code == 200) {
								uni.$u.toast('提交成功')
								uni.navigateTo({
									url:'/pages/shipmentRecord/index'
								})
							}
						})
					}).catch(errors => {
						uni.$u.toast('请检查是否有未填写字段')
					})
				},
				getHandling(params) {  
					getHandlingSituation(params).then(res => {
						if(res.data.code == 200) {
							this.handlingInfo = res.data.data.data || {}
							this.handlingInfo.list.map(item => {
								if (item.handle_money - this.allInfo.price > 0) {
									this.difference = this.$t('增加') + '￥' + (item.handle_money - this.allInfo.price)
									return this.difference
								} else {
									this.difference = this.$t('减免') + '￥' + Math.abs(item.handle_money - this.allInfo.price)
									return this.difference
								}
							})
						}
					})
				},
				back() {
					// uni.navigateBack()
					this.cback()
				},
		}
	}
</script>

<style lang="less">
	page {
			background: #F6F7FB;
		}
		
		.empty {
			width: 100%;
			height: 200rpx;
		}
		.titleSty {
			color: #1D1D1D;
			font-family: "PingFang SC";
			font-size: 28rpx;
			font-style: normal;
			font-weight: 600;
			margin-top: 34rpx;
			margin-left: 10rpx;
		}
		.inputSty {
			border-radius: 18rpx;
			background-color: #fff;
			line-height: 95rpx;
			e-input {
				float: right;
			}
			/deep/ .uni-input-input {
				text-align: right;
				margin-right: 50rpx;
			}
		}
		/deep/ .u-form-item__body__left__content__label {
			color: #1D1D1D;
			font-family: "PingFang SC";
			font-size: 28rpx;
			font-style: normal;
			font-weight: 600;
		}
			uni-button:after {
				border: none;
			}
			.formSty {
				// padding-bottom: 200rpx;
				/deep/ .u-form-item__body {
					padding: 0;
				}
			}
			.contentBg {
				background-color: #fff;
				padding: 0 24rpx;
				margin-top: 16rpx;
				border-radius: 18px;
			}
			.topBg {
				background-color: #fff;
				padding: 0 16rpx;
				margin-top: 24rpx;
				border-radius: 18px;
			}
			.textareaSty {
				height: 226rpx;
				border-radius: 18rpx;
				// border: 2rpx solid #D8D8D8;
				// background: #F7F7F7;
				margin-top: 24rpx;
			}
			.businessSty {
				height: 80rpx;
				border-radius: 18rpx;
				background: #F6F7FB;
				color: #333;
				font-family: "PingFang SC";
				font-size: 26rpx;
				font-style: normal;
				font-weight: 400;
				margin-top: 24rpx;
				text-indent: 24rpx;
			}
			
			.badBtn {
				height: 80rpx;
				border-radius: 18rpx;
				border: none;
				// border: 2rpx solid #D8D8D8;
				background: #F7F7F7;
				display: flex;
				justify-content: space-between;
				.amountCheapSty {
					/deep/ .u-text__value {
						color: #FE3E3B !important;
						font-family: "PingFang SC";
						font-size: 26rpx !important;
						font-style: normal;
						font-weight: 400;
						margin-right: 20rpx;
					}
				}
			}
		.header {
			font-size: 34rpx;
			height: 100rpx;
			line-height: 100rpx;
			font-weight: bold;
			text-align: center;
			position: relative;
			padding-top: var(--status-bar-height);
		}
		.back {
			position: absolute;
			width: 70rpx;
			height: 70rpx;
			top: 15rpx;
		}
	.footer_btn4{
		position: fixed;
		left:0;
		bottom: 0;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #fff;
		padding:30rpx 24rpx 60rpx;
		.btn_yellow {
			width: 216rpx;
			height: 94rpx;
			flex-shrink: 0;
			border-radius: 500rpx;
			// border: 2rpx solid rgba(241, 122, 3, 0.10);
			background: linear-gradient(90deg, #FF811E 0%, #FFBE7C 100%);
			color: #FFF;
			font-family: "PingFang SC";
			font-size: 32rpx;
			font-style: normal;
			font-weight: 600;
			text-align: center;
			line-height: 94rpx;
		}
		.btn_blue{
			width: 216rpx;
			height: 94rpx;
			flex-shrink: 0;
			border-radius: 500px;
			// border: 2rpx solid rgba(3, 189, 130, 0.10);
			background: linear-gradient(90deg, #278AFF 0%, #66D6E2 100%);
			color: #FFF;
			font-family: "PingFang SC";
			font-size: 32rpx;
			font-style: normal;
			font-weight: 600;
			text-align: center;
			line-height: 94rpx;
		}
		.btn_item{
			text-align: center;
			padding:0 10rpx;
			.name{
				color: #8C8C8C;
				font-size: 20rpx;
				line-height: 22rpx;
			}
		}
		.ico{
			width: 42rpx;
			height: 42rpx;
		}
	}
	.info_jiesuan{
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-radius: 18rpx;
		background: #F6F7FB;
		padding:20rpx 24rpx;
		color: #333;
		font-size: 26rpx;
		line-height: 40rpx;
		overflow: hidden;
		.jian{
			color: #FE3E3B;
		}
	}
	.disp_title{
		color: #1D1D1D;
		font-size: 28rpx;
		font-weight: 600;
		line-height: 28rpx;
		padding:24rpx 35rpx 10rpx;
	}
	.bor_bgff{
		margin: 20rpx 24rpx;
		background: #fff;
		border-radius: 20rpx;
	}
	.disp_info{
		padding:0 24rpx 30rpx;
		.title{
			color: #1D1D1D;
			font-size: 28rpx;
			font-weight: 600;
			line-height: 28rpx;
			padding:34rpx 0 24rpx;
		}
		.info_text{
			border-radius: 18rpx;
			background: #F6F7FB;
			padding:20rpx 24rpx;
			color: #333;
			font-size: 26rpx;
			line-height: 40rpx;
			overflow: hidden;
		}
	}
	.item_photo{
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
		align-content: flex-start; 
		flex-wrap: wrap;
		gap: 18rpx;
		padding:20rpx 0;
		.ph{
			display: block;
			width: 150rpx;
			height: 150rpx;
			flex-shrink: 0;
			border-radius: 15rpx;
		}
	}
	.guanl_order{
		margin: 20rpx 24rpx;
		height: 96rpx;
		background: #fff;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding:0 16rpx 0 24rpx;
		.name{
			font-size: 28rpx;
			line-height: 40rpx;
			font-weight: 600;
		}
		.info{
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			font-weight: 600;
	
		}
	}
</style>
